<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ReactJS 03 一个应用</title>
    <script src="https://cdn.bootcss.com/react/16.2.0/umd/react.production.min.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

    <link href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/vs2015.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>

    <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<div id="root"></div>

<script type="text/babel">
    class TodoApp extends React.Component{
        constructor(props){
            super(props);
            this.state = {items:[], text:''};
            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
        }
        render() {
            return (
                <div>
                    <h3>TODO</h3>
                    <TodoList items={this.state.items} />
                    <form onSubmit={this.handleSubmit}>
                        <input
                            onChange={this.handleChange}
                            value={this.state.text}
                        />
                        <button>
                            Add #{this.state.items.length + 1}
                        </button>
                    </form>
                </div>
            );
        }

        handleChange(e) {
            this.setState({ text: e.target.value });
        }

        handleSubmit(e) {
            e.preventDefault();
            if (!this.state.text.length) {
                return;
            }
            const newItem = {
                text: this.state.text,
                id: Date.now()
            };
            this.setState(prevState => ({
                items: prevState.items.concat(newItem),
                text: ''
            }));
        }
    }

    class TodoList extends React.Component {
        render() {
            return (
                <ul>
                    {this.props.items.map(item => (
                        <li key={item.id}>{item.text}</li>
                    ))}
                </ul>
            );
        }
    }

    ReactDOM.render(
        <TodoApp  />,
        document.getElementById('root')
    );
</script>

</body>
</html>